import Vue from 'vue'

Vue.directive('jujiao', {
  // 当指令所在DOM元素插入到了DOM中 ，只触发一次
  inserted (el) {
    focus(el)
  },
  // 当指令所在组件数据发生改变的时候，都会触发
  update (el) {
    focus(el)
  }
})

function focus (el) {
  /*
      1. 如果jujiao指令用在了原生标签上，el就是原生DOM对象
      2. 如果jujiao指令用在了上组件上（自定义标签），el就是当前组件的 根元素（root element）
    */
  // 1. el就是input或文本域 - 通过标签名判断
  if (['INPUT', 'TEXTAREA'].includes(el.tagName)) {
    el.focus()
    return
  }
  // 2. el不是input或文本域，尝试找它的子元素有没有input或文本域，
  let node = el.querySelector('input')
  // 2.1 有的话，让找到的子元素聚焦，
  if (node) {
    node.focus()
    return
  }
  node = el.querySelector('textarea')
  if (node) {
    node.focus()
    return
  }
  // 2.2 否则，直接抛错
  throw new Error('jujiao指令用错了')
}
